<template>
  <div class="box">
    <!-- 280 -->
    <img :src="list1.goodsImg" alt="" />
    <router-link :to='`/goodsInfrom/${list1.goodsId}`'>{{list1.goodsName}}</router-link>
    <router-link :to='`/goodsInfrom/${list1.goodsId}`'> 起拍价:{{goodsPrice}} ￥</router-link>
    <div class="flag" v-if="nowtime.getTime()<new Date(getStartTime).getTime()">
      <div class="bg">未开始</div>
      <span class="span_time">开始时间：{{getStartTime}}</span>
    </div>
    <div class="flag" v-else-if="nowtime.getTime()>new Date(getStartTime).getTime()&&nowtime.getTime()<new Date(getendTime).getTime()">
      <div class="bg">竞拍中</div>
      <span class="span_time">结束时间：{{getendTime}}</span>
    </div>
    <div class="flag" v-else>
      <div class="bg">已结束</div>
      <span class="span_time">感谢大家参与竞拍</span>
    </div>
    
  </div>
</template>

<script>
export default {
  name: "ItemGoods",
  props:['list1'],
  data() {
    return {
      nowtime:''
    }
  },
  created() {
    this.nowtime = new Date()
  },
  mounted() {
    
  },
  methods: {
    
  },
  computed:{
    goodsPrice(){
      return this.list1.goodsPrice < 10000 ? this.list1.goodsPrice : this.list1.goodsPrice/10000 + '万'
    },
    // getTime:function(){
    //   // new Date(this.list1.endTime).getTime()-new Date(this.list1.startTime).getTime()
    //   var endData = new Date(this.list1.endTime)
    //   var startData,end,start,allTime,allSecond,d,h,m,s,data
    //   setInterval(()=>{
    //     startData = new Date()
    //     end = endData.getTime()
    //     start = startData.getTime();
    //     allTime = end - start

    //      /*
    //       毫秒转换成天时分秒的公式
    //       1、总秒数/3600/24——天
    //       2、总秒数/3600%24——时
    //       3、总秒数/60%60——分
    //       4、总秒数%60——秒
    //     */
    //     allSecond = Math.floor(allTime/1000);
    //      //console.log(allSeco 
    //     d = Math.floor(allSecond/3600/24);
    //     h = Math.floor(allSecond/3600%24);
    //     m = Math.floor(allSecond/60%60);
    //     s = Math.floor(allSecond%60);
    //     // `${d}天${h}时${m}分${s}秒`
    //     return allSecond
    //   },1000)
    // },
    getStartTime(){
      return this.list1.startTime
    },
    getendTime(){
      return this.list1.endTime
    }
  }
};
</script>

<style scoped>
.box {
  width: 220px;
  height: 280px;
  background-color: #fff;
  padding: 5px;
  margin-left: 5px;
  margin-top: 5px;
  float: left;
  position: relative;
}
.flag{
  position: absolute;
  top: 0;
  left: 0;
}
.bg{
    background-color: #d03838;
    opacity: .9;
    width: 80px;
    height: 30px;
    line-height: 30px;
    border-radius: 0 15px 15px 0;
    font-size: 16px;
    font-family: "楷体";
    color: #fff;
}
.span_time{
  display: inline-block;
  background-color: #787878;
  opacity: .8;
  width: 220px;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  color: #fff;
}
.bottom .box img {
  width: 100%;
  height: 210px;
  /* background-color: rebeccapurple; */
}
.bottom .box a {
  display: block;
  width: 100%;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000;
}
.bottom .box a:hover{
    color: red;
}
</style>